<template>
  <div class="playlist-container">
    <div class="top-wrap">
      <div class="img-wrap">
        <img :src="coverImg" alt="" />
      </div>
      <div class="info-wrap">
        <p class="title">{{name}}</p>
        <div class="author-wrap">
          <img class="avatar" :src="avatarUrl" alt="" />
          <span class="name">{{nickName}}</span>
          <span class="time">{{createTime | dateString}} 创建</span>
        </div>
        <div class="play-wrap">
          <span class="iconfont icon-circle-play"></span>
          <span class="text">播放全部(无效)</span>
        </div>
        <div class="tag-wrap">
          <span class="title">标签:</span>
          <ul>
            <li v-for="(item,index) in tags" :key="index">{{item}}</li>
          </ul>
        </div>
        <div class="desc-wrap">
          <span class="title">简介:</span>
          <span class="desc">
            {{description}}
          </span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeIndex">
      <el-tab-pane label="歌曲列表" name="1">
        <table class="el-table playlit-table">
          <thead>
            <th></th>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr class="el-table__row" v-for="(item,index) in songs" :key="index">
              <td>{{index+1}}</td>
              <td>
                <div class="img-wrap">
                  <img :src="item.al.picUrl" alt="" />
                  <span class="iconfont icon-play" @click="playSong(item.id)"></span>
                </div>
              </td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                    <span class="iconfont icon-mv" v-if="item.mv!==0" @click="toMv(item.mv)"></span>
                  </div>
                  <span v-if="item.alia.length!==0">{{item.alia[0]}}</span>
                </div>
              </td>
              <td>{{item.ar[0].name}}</td>
              <td>{{item.al.name}}</td>
              <td>{{item.dt}}</td>
            </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="评论" name="2" >
        <!-- 精彩评论 -->
        <div class="comment-wrap">
          <p class="title">精彩评论<span class="number">({{hotCommentCount}})</span></p>
          <div class="comments-wrap">
            <div class="item" v-for="(item,index) in hotComment" :key="index">
              <div class="icon-wrap">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content-wrap">
                <div class="content">
                  <span class="name">{{item.user.nickname}}：</span>
                  <span class="comment">{{item.content}}</span>
                </div>
                <div class="re-content" v-if="item.beReplied.length!=0">
                  <span class="name">{{item.beReplied[0].user.nickname}}：</span>
                  <span class="comment">{{item.beReplied[0].content}}</span>
                </div>
                <div class="date">{{item.tiem | dateString('YYYY-MM-DD HH:mm:ss')}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 最新评论 -->
        <div class="comment-wrap">
          <p class="title">最新评论<span class="number">({{newCommentCount}})</span></p>
          <div class="comments-wrap">
            <div class="item" v-for="(item,index) in newComment" :key="index">
              <div class="icon-wrap">
                <img :src="item.user.avatarUrl" alt="" />
              </div>
              <div class="content-wrap">
                <div class="content">
                  <span class="name">{{item.user.nickname}}：</span>
                  <span class="comment">{{item.content}}</span>
                </div>
                <div class="re-content" v-if="item.beReplied.length!=0">
                  <span class="name">{{item.beReplied[0].user.nickname}}：</span>
                  <span class="comment">{{item.beReplied[0].content}}</span>
                </div>
                <div class="date">{{item.tiem | dateString('YYYY-MM-DD HH:mm:ss')}}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          :page-size="10"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from 'moment'
  import connect from '@/evenBus.js'
  
export default {
  name: 'playlist',
  data() {
    return {
      activeIndex: '1',
      type:0,
      total: 0, // 总条数
      page: 1, // 页码
      // limit:0
      coverImg:'', //歌单大图
      createTime:'', //歌单创建时间
      nickName:'', //歌单创建者
      avatarUrl:'', //创建者头像
      name:'', //歌单名字
      tags:[], //歌单标签
      description:'', //歌单描述
      songs:[], //歌单内歌曲
      hotComment:[], //热门评论
      hotCommentCount:'', //热门评论数量
      newComment:[], //最新评论
      newCommentCount:'', //新评论数量
    };
  },
  // 格式化创建时间
  filters:{
    dateString(val,format){
      return moment(val).format(format || 'YYYY-MM-DD')  
    }
  },
  // watch:{
  //   activeIndex(){
  //     switch(this.activeIndex){
  //       case:'1':
          
  //     }
  //   }
  // },
  created() {
    // 请求歌单详情
    axios({
      url:'https://autumnfish.cn/playlist/detail',
      method:'get',
      params:{
        id:this.$route.query.q
      }
    }).then(res=>{
      console.log('歌单详情',res)
      this.coverImg=res.data.playlist.coverImgUrl //歌单大图
      this.createTime=res.data.playlist.createTime //歌单创建时间
      this.nickName=res.data.playlist.creator.nickName //歌单创建者
      this.avatarUrl=res.data.playlist.creator.avatarUrl //创建者头像
      this.name=res.data.playlist.name //歌单名字
      this.tags=res.data.playlist.tags //歌单标签
      this.description=res.data.playlist.description //歌单描述
      this.songs=res.data.playlist.tracks
      for (var i = 0; i < this.songs.length; i++) {
        let time = moment.duration(this.songs[i].dt)
        let seconds = time._data.seconds > 9 ? time._data.seconds : '0' + time._data.seconds
        this.songs[i].dt = `${time._data.minutes}:${seconds}`
      }
    }),
    // 热门评论
    axios({
      url:'https://autumnfish.cn/comment/hot',
      method:'get',
      params:{
        id:this.$route.query.q,
        type:2
      }
    }).then(res=>{
      // console.log('热门评论',res)
      this.hotComment=res.data.hotComments
      this.hotCommentCount=res.data.total
    })
    this.toNewComment()
  },
  methods: {
    // 翻页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page=val
      this.toNewComment()
    },
    playSong(id) {
      // 播放歌曲
      axios({
        url: ' https://autumnfish.cn/song/url',
        method: 'get',
        params: {
          id: id
        }
      }).then(res => {
        // console.log('播放地址', res)
        this.$parent.musicUrl = res.data.data[0].url
      })
    },
    // 最新评论
    toNewComment(){
      axios({
        url:'https://autumnfish.cn/comment/playlist',
        method:'get',
        params:{
          id:this.$route.query.q,
          limit:10,
          offset:(this.page-1)*10
        }
      }).then(res=>{
        console.log('最新评论',res)
        this.newComment=res.data.comments
        this.total=res.data.total
        this.newCommentCount=this.total
      })
    },
    // 播放mv
    toMv(id){
      this.$router.push(`/mv?q=${id}`)
    },
  }
};
</script>

<style >

</style>
